<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
      
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="120px"
    >
      <el-form-item  label="供应商名称" prop="name">
       <el-input
          v-model="queryParams.name"
          placeholder="请输入供应商名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-row :gutter="10" style="margin-bottom: 16px">
      <el-col :span="12">
        <div style="text-align: left">
          <el-button
            type="primary"
            
            @click="btnAdd"
            :loading="exportLoading"
            v-hasPermi="['system:tenant:export']"
          >
            新增
          </el-button>
        </div>
      </el-col>
    
    </el-row>
    <el-table
      v-loading="loading"
      :data="dataList"
      border
      style="width: 100%"
    >
      
      <el-table-column label="供应商编号" align="center" prop="id" min-width="120" />
      <el-table-column label="供应商名称" align="center" prop="name" min-width="120" />
      <el-table-column label="负责人" align="center" prop="contact" min-width="100" />
      <el-table-column label="手机号码" align="center" prop="mobile" min-width="120" />
      <el-table-column label="联系电话" align="center" prop="telephone" min-width="120" />
      <el-table-column label="电子邮箱" align="center" prop="email" min-width="120" />
      <el-table-column label="传真" align="center" prop="fax" min-width="120" />
      <el-table-column label="开启状态" align="center" prop="status" min-width="120" />
      <el-table-column label="排序" align="center" prop="sort" min-width="120" />
      <el-table-column label="纳税人识别号" align="center" prop="taxNo" min-width="120" />
      <el-table-column label="税率" align="center" prop="taxPercent" min-width="120" />
      <el-table-column label="开户行" align="center" prop="bankName" min-width="120" />
      <el-table-column label="开户账号" align="center" prop="bankAccount" min-width="120" />
      <el-table-column label="开户地址" align="center" prop="bankAddress" min-width="120" />
      <el-table-column label="备注" align="center" prop="remark" min-width="140"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row)">
          编辑
        </el-button>
        <el-button link type="danger" size="small" @click="btnDetail(scope.row)">
          删除
        </el-button>
      </template>

    </el-table-column>
    </el-table>
    <!-- 分页 -->
      <div class="footer-area">
        <el-pagination
      v-model:pageNo="queryParams.pageNo"
      v-model:pageSize="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </div>
  </ContentWrap>

  
  
   <!-- 新增弹框 -->
  <docking v-model="dockShow" @confirm="btnconfirm" :ids="ids" />
</template>
<script lang="ts" setup>
import docking from './components/add.vue'
import {supplierApi} from '@/api/erp/foundation/supplier'
import { h } from 'vue'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as RefundApi from '@/api/pay/refund'
import * as AppApi from '@/api/pay/app'
import download from '@/utils/download'
import type { TableColumnCtx } from 'element-plus'
import type { VNode } from 'vue'
import { id } from 'element-plus/es/locale'
const dockShow =ref(false)
const list = ref([]) // 列表的数据
const message = useMessage() // 消息弹窗

const loading = ref(false) // 列表遮罩层
const total = ref(0) // 列表的总页数
const isExpanded = ref(false)
// 切换展开状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}
const visibleColumns = ref({
  image: true,
  bianhao: true,
  name: true,
  count: true,
  feilei: true,
  shuxing: true,
  beizhu: true,
  zhuangtai: true,
  danwei: true,
  beizhu2: true,
  danwei2: true,
  danwei3: true
})
const ids=ref("")
//删除
function btnDetail(e){
  console.log('这是什么',e.id)
  ids.value=e.id
  ElMessageBox.confirm(
    '确实是否删除该数据',
    
    {
      confirmButtonText: 'OK',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
   
      supplierApi.delete(ids.value).then((res)=>{
        console.log('这是啥',res)
        if(res == true){
          getpageList()
          ElMessage({
        type: 'success',
        message: '操作成功',
      })
        }
      })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

const dialogVisible = ref(false)
const tempVisibleColumns = ref({ ...visibleColumns.value })
const searchConfig = ref([
  {
    prop: 'shipmentNumber',
    placeholder: '请输入入库编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'materialKey',
    placeholder: '请选择单据类型',
    type: 'select',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入物料名称/编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入规格',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入型号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入关联单号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入建议供应商',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入仓库',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库区',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库位',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入销售订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入客户订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'createTime',
    type: 'dateRange',
    startPlaceholder: '制单开始日期',
    endPlaceholder: '制单结束日期',
    showInCollapsed: false
  }
])
const dataList=ref([])
const name=ref("")
const pageNo=ref(1)
const pageSize=ref(10)
const telephone =ref("")
const mobile=ref("")
/** 初始化 **/
onMounted(async () => {
  getpageList()
})
//新增刷新列表
function btnconfirm(){
  getpageList()
}
//分页
function  handleSizeChange(e){
  pageSize.value=e
  getpageList()
}
function handleCurrentChange(e){
  pageNo.value=e
  getpageList()
}
//列表接口
function getpageList(){
  let parm={
    name:name.value,
    pageNo:pageNo.value,
    pageSize:pageSize.value,
    telephone:telephone.value,
    mobile:mobile.value
  }
  supplierApi.pageList(parm).then((res)=>{
    console.log('列表的数据',res)
    total.value=res.total
      dataList.value=res.list
      for(let item of dataList.value){
        if(item.status == 0){
          item.status='开启'
        }else if(item.status == 1){
           item.status='关闭'
        }
      }
  })
}
//打开新增弹框
function btnAdd(){
  ids.value=''
  dockShow.value=true
}
//编辑
function handleClick(e){
  ids.value=e.id
  dockShow.value=true
}

const btnLie = () => {
  tempVisibleColumns.value = { ...visibleColumns.value }
  dialogVisible.value = true
}

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
 name:undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出等待
const appList = ref([]) // 支付应用列表集合


/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 查询列表 */
// const getList = async () => {
//   loading.value = true
//   try {
//     const data = await RefundApi.getRefundPage(queryParams)
//     list.value = data.list
//     total.value = data.total
//   } finally {
//     loading.value = false
//   }
// }

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}



/** 预览详情 */
const detailRef = ref()
const openDetail = (id: number) => {
  detailRef.value.open(id)
}


</script>
<style scoped>
.footer-area{
  display: flex;
    padding-bottom: 14px;
    margin-top: 26px;
    justify-content: end;
  
}

:deep(.el-table__footer-wrapper tfoot td) {
  background-color: #fff3e0;
}

.expand-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 12px;
  color: #909399;
}

/* 使表单行间距更合理 */
.el-form-item {
  margin-bottom: 10px;
}

.order-font {
  padding: 2px 0;
  font-size: 12px;
}
</style>
